<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户收藏'"></navtop>
        </div>
        <div v-show="notempty" class="favlistContainer">
            <div v-for="(item, index) in favList" :key="index" class="cards">
                <div @click="godetails(item.goods)" class="left">
                    <img v-lazy="item.goods.goodCoverImg" />
                </div>
                <div class="right">
                    <div>{{item.goods.goodName}}</div>
                    <div>{{item.goods.goodDetailNmae}}</div>
                    <div class="prices">
                        <div>
                            <button @click="removefav(item,index)">移除</button>
                        </div>
                        <div class="peice">{{item.goods.goodPrice}}￥</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="!notempty" class="empty">
            <div class="enptytext">收藏夹空啦！</div>
            <mt-button @click="goindex" class="btns" plain type="primary" size="large">去逛逛~</mt-button>
        </div>
    </div>
</template>


<script>
import navtop from "../navtop/nav.vue";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            favList: [],
            notempty: true
        };
    },
    mounted() {
        this.favList = this.$store.state.fav;
        if (this.$store.state.fav.length > 0) {
            this.notempty = true;
        } else {
            this.notempty = true;
        }
    },
    methods: {
        // 移除收藏
        removefav(item, index) {
            this.$ajax
                .delete("/fav/" + item.id)
                .then(res => {
                    Toast({
                        message: "移除成功",
                        position: "top"
                    });
                    this.favList.splice(index, 1);
                    this.$store.commit("favStore", this.favList);
                })
                .catch(err => {
                    Toast({
                        message: "网络错误",
                        position: "top"
                    });
                });
        },
        // 去逛逛
        goindex() {
            this.$router.push({ name: "home" });
        },
        //去详情页
        godetails(goods) {
            this.$router.push({
                name: "gooddetails",
                params: { id: goods.id }
            }); // 这里使用路由传参的方式将id传到详细页
        }
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
.empty {
    margin-top: 45%;
    .enptytext {
        text-align: center;
        font-size: 1rem;
        font-style: italic;
        opacity: 0.5;
    }
    .btns {
        margin-top: 30px;
    }
}
.favlistContainer {
    .cards {
        padding: 2px;
        width: 100%;
        height: 130px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin-top: 5px;
        // border: 1px solid red;
        display: flex;
        .left {
            width: 40%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .right {
            width: 60%;
            height: 100%;
            padding-left: 2px;
            padding-right: 2px;
            div:nth-child(1) {
                height: 15%;
                font-size: 0.8rem;
            }
            div:nth-child(2) {
                height: 60%;
                font-size: 0.7rem;
                padding-right: 15px;
            }
            div:nth-child(3) {
                height: auto;
                font-size: 0.8rem;
                color: red;
            }
            .prices {
                display: flex;
                justify-content: space-between;
                div {
                    button {
                        border-radius: 5px;
                        border: none;
                        background-color: #ef4f4f;
                        color: #eeeeee;
                    }
                }
                .peice {
                    padding-right: 20px;
                    font-size: 0.8rem;
                }
            }
        }
    }
}
</style>